<template>
    <div class="schedule-table" v-loading="loadings">
        <div class="sace_input">
            <div>
                <a-form size="small" :model="pageData" layout="inline">
                    <a-form-item label="查询日期">
                        <a-date-picker  popup-container="html"  class="bacClass" v-model="dropDownData1" style="width: 200px;" />至<a-date-picker  popup-container="html" 
                            class="bacClass" v-model="dropDownData2" style="width: 200px;" />
                    </a-form-item>
                </a-form>
            </div>

            <div>
                <el-button type="primary" :icon="Search" @click="searchClick">查询</el-button>
            </div>
            <div>
                <div>
                    <div class="bissBoosNo1"></div>&nbsp;
                    <div> 未派工</div>
                </div>
                <div>
                    <div class="bissBoosNo2"></div>&nbsp;
                    <div> 已派工</div>
                </div>
                <div>
                    <div class="bissBoosNo3"></div>&nbsp;
                    <div> 已完成</div>
                </div>
            </div>
        </div>
        <table cellpadding="0" border="0">
            <thead>
                <tr>
                    <th class="jtCss">机台/时间</th>
                    <th v-for="item in weekDay" class="week-title">
                        {{ item }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in duration">
                    <td class="duration-title">{{ item.facilityName }}</td>
                    <td v-for="n in weekDay" style="overflow:auto">
                        <!--  -->
                        <div style="height: 49%"
                            v-for="i in courdList[n + ',' + item.facilityName]">
                            <div style="height: 80%;display: flex;align-items: center;"
                                :class="i?.state == 1 ? 'duration-cour' : i?.state == 2 ? 'duration-cour2' : i?.state == 3 ? 'duration-cour3' : ''">
                            </div>
                        </div>
                        <div style="height: 49%" v-if="!courdList[n + ',' + item.facilityName]">
                            <div style="height: 80%;display: flex;align-items: center;"
                                class="duration-cour4">
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup lang="ts">
import { ref, toRefs, reactive, onMounted } from "vue"
import { Search } from '@element-plus/icons-vue'
import { post } from "@/api/http"
import { Message } from '@arco-design/web-vue'
import { baseURL } from '@/api/axios.config'

onMounted(() => {
    select()
})

function formatDateTime(date: any, format: any) {
    const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
        'H+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds(), // 毫秒
        a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
        A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (let k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            );
        }
    }
    return format;
}

const loadings = ref(false)

const selectType = ref(1)

const weekDay: any = ref([])

const duration: any = ref([])

const courdList: any = ref()

const pageData: any = reactive({ dropDownData1: formatDateTime(new Date(), 'yyyy-MM-dd'), dropDownData2: formatDateTime(new Date(Number(new Date().getTime()) + (60 * 1000 * 60 * 24 * 7)), 'yyyy-MM-dd'), })

const { dropDownData1, dropDownData2 } = toRefs(pageData)

const searchClick = () => {
    select()
}


function select() {
    loadings.value = true
    post({
        url: 'temRepair/repairSubscribe/ReportRepairSubscribe',
        data: {
            "timeBegin": pageData.dropDownData1,
            "timeEnd": pageData.dropDownData2,
        }
    }).then((res: any) => {
        if (res.code == 200) {

            weekDay.value = res.data.list.typeTime.typeTime
            duration.value = res.data.list.facilityName
            courdList.value = res.data.list.sumList
            loadings.value = false
        } else {
            Message.error(res.message)
            weekDay.value = []
            duration.value = []
            courdList.value = []
        }
    }).finally(() => {
        loadings.value = false
    })
}


</script>
<style lang="less" scoped>
.schedule-table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;

    .sace_input {
        width: 80%;
        display: flex;
        justify-content: space-between;
        height: 80px;
        align-items: center;
        margin-top: 10px;
        position: sticky;
        left: 0;

        div:last-of-type {
            display: flex;

            div {
                width: 100px;
                display: flex;
                font-family: Microsoft Yahei;
                font-size: 16px;
                font-weight: 500;

                .bissBoosNo1 {
                    width: 20px;
                    height: 18px;
                    border-radius: 2px;
                    background-color: #409eff;
                    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
                }


                .bissBoosNo2 {
                    width: 20px;
                    height: 18px;
                    border-radius: 2px;
                    background-color: #79ff40;
                    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
                }


                .bissBoosNo3 {
                    width: 20px;
                    height: 18px;
                    border-radius: 2px;
                    background-color: #44c553;
                    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
                }
            }
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        border-color: #ccc;
        min-height: 20vh;
        max-height: 80vh;

        thead {
            position: sticky;
            top: 0px;
            background-color: white;
            z-index: 10;
        }

        tbody td:first-child {
            position: sticky;
            left: 0px;
            top: 60px;
        }

        .jtCss {
            position: sticky;
            left: 0px;
            z-index: 999;
            background-color: #fff;
            width: 100px;
        }

        th,
        td {
            text-align: center;
            border: 1px solid #ccc;
        }

        th {
            height: 60px;
            width: 100px;
        }

        td {
            height: 60px;
            cursor: pointer;
        }
    }
}

.week-title {
    color: #004085;
    background-color: #cce5ff;
}

.duration-title {
    color: #856404;
    background-color: #fff3cd;
    width: 100px;
    z-index: 998;
}

.duration-cour {
    background-color: #409eff !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
}

.duration-cour2 {
    background-color: #79ff40 !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
}

.duration-cour3 {
    background-color: #44c553 !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
}
.duration-cour4 {
    background-color: #beb7b7 !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
}

.contentDiv {
    display: flex;
    justify-content: space-between;

    .contentDiv2 {
        width: 145px;
        height: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;

        .contentDivTile {
            font-family: Microsoft Yahei;
            font-size: 16px;
            font-weight: 500;
            width: 143px;
            height: 15%;
            text-align: center;
            color: #409eff;
            border-bottom: 1px dashed #ccc;

        }

        .contentDivTile2 {
            font-family: Microsoft Yahei;
            font-size: 14px;
            font-weight: 500;
            width: 143px;
            height: 20px;
            text-align: center;
            border-bottom: 1px dashed #ccc;
        }
    }
}

.contentDivNo1 {
    width: 450px;
    height: 25px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;

    .contentDivNo2 {
        font-family: Microsoft Yahei;
        font-size: 16px;
        font-weight: 500;
        color: #409eff;
        position: relative;
        left: 15px;
        line-height: 22px;
    }

    .contentDivNo3 {
        font-size: 14px;
        font-weight: 500;
        position: relative;
        left: 30px;
    }
}
</style>